import dayjs from "dayjs";

Component({
  options: {
    styleIsolation: 'apply-shared'
  },
  properties: {
    beginYear: {
      type: Number,
      value: 1920
    },
    endYear: {
      type: Number,
      value: 2050
    },
    date: String,
    info: {
      type: Object,
      observer(current, old) {
        this.updateInfo();
      }
    }
  },
  data: {
    current: new Date(),
    year: 0,
    month: 0,
    monthPrev:0,
    monthNext:0,
    months: ['一月 ', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    weeks: ['日', '一', '二', '三', '四', '五', '六'],
    dates: []
  },
  lifetimes: {
    attached: function () { 
      const { date, info} = this.data;
      let current;
      if(date){
        current = new Date(date.replace(/-/g, '/'));
      }
      else{
        current = new Date();
      }
      this.setData({
        current
      });

      this.bindData(current);
      this.updateInfo();
    }
  },
  methods: {
    goPrevMonth() {
      let { year, month, beginYear} = this.data;

      if(year === beginYear && month == 1){
        return;
      }
      month--;
      if(month === 0) {
          year--;
          month = 12;
      }
      const date = new Date(year, month - 1, 1);
      this.bindData(date);
      this.updateInfo();
    },
    goNextMonth(){
      let { year, month, endYear} = this.data; 

      if(year === endYear && month == 12){
          return;
      }
      month++;
      if (month === 13) {
          year++;
          month = 1;
      }
      const date = new Date(year, month - 1, 1);
      this.bindData(date);
      this.updateInfo();
    },
    bindData(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const monthPrev = month <= 1 ? 12 : month - 1;
      const monthNext = month >= 12 ? 1 : month + 1;
      const dates = this.getDates(date);

      this.setData({
        current: date,
        year,
        month,
        monthPrev,
        monthNext,
        dates
      });

      this.triggerEvent('update', { 
        year,
        month,
        dates
      });

      return this;
    },
    getDates(date){
      let year = date.getFullYear(),
          month = date.getMonth() + 1,
          dates = new Array(42).fill({}),
          week = new Date(year, month - 1, 1).getDay(), // 这个月1号的星期
          dayNum = new Date(year, month, 0).getDate(), // 当月天数
          day2Num = new Date(year, month - 1, 0).getDate(); // 上个月天数

      return dates.map((date, i) => {
        const item = Object.assign({}, date);

        if(i < week){ // 1号之前的数据
          item.year = month <= 1 ? year - 1 : year;
          item.month = month <= 1 ? 12 : month - 1;
          item.day = day2Num - week + i + 1;
          item.cls = 'prev-month';
        }
        else if(i < (week + dayNum)){ // 这个月的数据
          item.year = year;
          item.month = month;
          item.day = i - week + 1;
          item.cls = '';
        }
        else{ // 这个月最大天数之后的数据
          item.year = month >= 12 ? year + 1 : year;
          item.month = month >= 12 ? 1 : month + 1;
          item.day = i - week - dayNum + 1;
          item.cls = 'next-month';
        }

        item.date = item.year + '-' + (item.month < 10 ? ('0' + item.month) : item.month) + '-' + (item.day < 10 ? ('0' + item.day) : item.day);

        // 当天
        if(item.date === dayjs(new Date()).format("YYYY-MM-DD")){
          item.today = true;
          item.cls += ' today';
        }

        return item;
      });
    },
    updateInfo(){
      const { dates, year, month, info } = this.data;

      dates.forEach(item => {
        // 有安排
        const data = info[item.date];

        if(data?.cls){
          item.cls += ' ' + data.cls;
        }
      });

      this.setData({
        dates: [...dates]
      });

      this.triggerEvent('info', { 
        year,
        month: month,
        dates
      });
    },
    onDateClick(e){
      const { dataset: {item, index}} = e.currentTarget;

      this.triggerEvent('datechange', item)
    }
  }
})